<template>
  <div class="app-container">
    <course-select ref="courseSel" @setCourseInfo="setCourseInfo"/>
    <user-select ref="userSel" @setUserInfo="setUserInfo"/>
    <common-select ref="comSel" @setSelectInfo="setSelectInfo"/>
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <div class="dd-portlet">
        <div class="dd-title">
          <span>任务信息</span>
        </div>
        <div class="dd-body">
          <el-row>
            <el-col :span="8">
              <el-form-item label="任务名称" prop="taskName">
                <el-input v-model="form.taskName" maxlength="20" style="width: 100%;"/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="任务考核" class="dd-label" prop="status">
                <el-select v-model="form.checkId" style="width: 100%;" clearable  filterable  placeholder="任务考核">
                  <el-option v-for="item in checkList" :key="item.id" :label="item.checkName" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="任务状态" class="dd-label" prop="status">
                <el-select v-model="form.status" style="width: 100%;" placeholder="课程状态">
                  <el-option v-for="item in dicts" :key="item.value" :label="item.label" :value="item.value-0">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="开始时间" prop="startTime">
                <el-date-picker
                  v-model="form.startTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期" style="width: 100%;">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结束时间" prop="endTime">
                <el-date-picker
                  v-model="form.endTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期" style="width: 100%;">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="rowStyle">
            <el-col :span="8">
              <el-form-item label="任务描述">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 7, maxRows: 11}" maxlength="200"
                  placeholder="请输入任务描述,200字以内"
                  v-model="form.taskDesc">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

        </div>
        <div class="dd-title">
          <span>参与人员</span>
        </div>
        <div class="dd-body" style="margin-top: -15px;">
          <el-form-item label="人员选择">
            <el-link type="primary" @click="selectUser" :underline="false">人员选择</el-link>
          </el-form-item>
          <el-form-item label="人员列表">
            <div class="personDiv">
              <el-tag v-for="user in form.taskUser" :key="user.userId" closable type="info"
                      @close="deletePersonnel(user)">{{user.userName}}
              </el-tag>
            </div>
          </el-form-item>
        </div>
        <div class="dd-title">
          <span>培训课程</span>
        </div>
        <div class="dd-body" style="margin-top: -15px;">
          <el-form-item label="课程选择">
            <el-link type="primary" @click="selectUserCourse" :underline="false">课程选择</el-link>
          </el-form-item>
          <el-form-item label="课程列表">
            <div class="personDiv">
              <el-tag v-for="course in form.taskCourse" :key="course.courseId" closable type="info"
                      @close="deleteCourse(course)">{{course.courseName}}
              </el-tag>
            </div>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="footer">
      <el-button type="info" @click="goBack" round>取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit" round>确认</el-button>
    </div>
  </div>
</template>

<script>
  import { add, info } from '@/api/business/task'
  import { getCheckPageList } from '@/api/business/check'
  import userSelect from '../components/userSelect'
  import commonSelect from '../components/commonSelect'
  import courseSelect from '../components/courseSelect'
  import { getPostPageList } from '@/api/business/user'
  import initDict from '@/mixins/initDict'

  export default {
    mixins: [initDict],
    components: { userSelect, courseSelect, commonSelect },
    name: 'from',
    data() {
      return {
        loading: false,
        dialog: false,
        queryId: this.$route.query.id,
        checkList: [],
        form: {
          taskName: null,
          taskDesc: null,
          status: 0,
          duration: 0,
          startTime: null,
          endTime: null,
          taskUser: [],
          checkId: '',
          taskCourse: []
        },
        options: [{
          value: 0,
          label: '未发布'
        }, {
          value: 1,
          label: '已发布'
        }],
        rules: {
          taskName: [
            { required: true, message: '任务名称', trigger: 'blur' }
          ],
          startTime: [
            { required: true, message: '请选择开始时间', trigger: 'blur' }
          ],
          endTime: [
            { required: true, message: '请选择结束时间', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.$nextTick(() => {
        this.getDict('publish_status')
        this.getCheckList()
        if (this.queryId) {
          this.queryInfo()
        }
      })
    },
    methods: {
      doSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.doAdd()
          }
        })
      },
      setSelectInfo(data) {
        if (data != null) {
          if (data.type === 4) {
            this.setUserInfo(data.data)
          } else {
            const params = this.getQueryParams(data)
            getPostPageList(params).then(data => {
              this.setUserInfo(data.content)
            })
          }
        }
      },
      getQueryParams(data) {
        const params = { size: 10000, roleCode: 'r_student' }
        const paramsIds = data.data.map(item => item.id)
        switch (data.type) {
          case 1:
            params.deptIds = paramsIds
            break
          case 2:
            params.jobs = paramsIds
            break
          case 3:
            params.specialtyIds = paramsIds
            break
        }
        return params
      },
      setUserInfo(data) {
        this.form.taskUser = []
        data.forEach(item => {
          const user = {
            userId: item.id,
            userName: item.name
          }
          this.form.taskUser.push(user)
        })
        this.form.taskUser = Array.from(new Set(this.form.taskUser))
      },
      selectUser() {
        this.$refs.comSel.dialog = true
      },
      deletePersonnel(user) {
        this.form.taskUser.splice(this.form.taskUser.indexOf(user), 1)
      },
      selectUserCourse() {
        this.$refs.courseSel.dialog = true
        this.$refs.courseSel.init()
      },
      setCourseInfo(data) {
        this.form.taskCourse = []
        data.forEach(item => this.form.taskCourse.push(item))
        this.form.taskCourse = Array.from(new Set(this.form.taskCourse))
      },
      deleteCourse(course) {
        this.form.taskCourse.splice(this.form.taskCourse.indexOf(course), 1)
      },
      doAdd() {
        if (this.form.taskUser.length === 0) {
          this.$message.error('请选择参与人员')
          return
        }
        if (this.form.taskCourse.length === 0) {
          this.$message.error('请选择培训课程')
          return
        }
        add(this.form).then(res => {
          this.$notify({
            title: '操作成功',
            type: 'success',
            duration: 2500
          })
          this.loading = false
          this.goBack()
        }).catch(err => {
          this.loading = false
        })
      },
      queryInfo() {
        info(this.queryId).then(data => {
          this.form = data
        })
      },
      getCheckList() {
        const params = { size: 10000,checkType:5 }
        getCheckPageList(params).then(data => {
          this.checkList = data.content
        })
      },
      goBack() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style scoped>
  .app-container{
    border: none;
    background-color: #ffffff;
    padding: 5px;
  }
  .footer {
    height: 100px;
    width: 100%;
    text-align: center;
    bottom: 0;
  }

  .personDiv {
    width: 100%;
    height: 200px;
    overflow: auto;
    border: 1px dashed #dcdfe6;
  }
  .rowStyle{
    margin-top: 5px;
  }
  .el-tag.el-tag--info{
    margin-left: 5px
  }
  .el-tag + .el-tag {
    margin: 5px 10px;
  }
</style>
